import React from 'react'
import PropTypes from 'prop-types'
import './example.scss'

class Example extends React.Component {
  static contextTypes = {
    router: PropTypes.object.isRequired,
  }
  constructor(props) {
    super(props)
    this.state = {}
  }
  componentWillMount() {}
  componentDidUpdate() {}
  componentDidMount() {}
  componentWillUnmount() {}

  render() {
    return (
      <div className="example-container">
        <div className="example-header">
          <div className="example-header-desc">
            优秀的创作不仅要求作品本身具备创意性和审美性；同样也要求创作者能够很好的介绍和传递自己的创作理念；
            做到以上两点不但可以让你的作品更受他人欢迎，也能获得专业评审委员的更多青睐，突出重围，脱颖而出～
          </div>
        </div>
        <div className="example-desc">
          <div className="example-desc-title">作品展示</div>
          <div className="example-desc-text">
            为了帮助评委更好地判断作品，可以从以下几个角度进行拍摄。同时请注意保证照片背景整洁，不要让无关物品干扰作品呈现。
          </div>
          <div className="example-desc-imgs">
            <div className="desc-img-item">
              <img
                className="img-item-main"
                src={require('../../static/example/img_shifan_a1@3x.png')}
                alt=""
              />
              <div className="img-item-desc">正面图</div>
            </div>
            <div className="desc-img-item">
              <img
                className="img-item-main"
                src={require('../../static/example/img_shifan_d1@3x.png')}
                alt=""
              />
              <div className="img-item-desc">侧45度图</div>
            </div>
            <div className="desc-img-item">
              <img
                className="img-item-main"
                src={require('../../static/example/img_shifan_c1@3x.png')}
                alt=""
              />
              <div className="img-item-desc">背面图</div>
            </div>
            <div className="desc-img-item">
              <img
                className="img-item-main"
                src={require('../../static/example/img_shifan_e1@3x.png')}
                alt=""
              />
              <div className="img-item-desc">参考建筑</div>
            </div>
          </div>
        </div>
      </div>
    )
  }
}

export default Example
